import { memo, useState, useEffect, useRef, useCallback } from 'react'
import { CSSTransition } from 'react-transition-group'
import {
  Container,
  ImgWrapper,
  CollectButton,
  SongListWrapper,
  BgLayer
} from './style.js'
import Header from '../../baseUI/header'
import SongsList from '../SongList'
import Scroll from '../../baseUI/scroll'
import { HEADER_HEIGHT } from '../../api/config'
import { connect } from 'react-redux'
import { getSinger, changeEnterLoading } from './store/actionCreator'
import Loading from '../../baseUI/loading'
import MusicNote from '../../baseUI/music-note/index'
import musicNote from '../../baseUI/music-note/index'

const mapStatetoProps = state => ({
  artist: state.getIn(['singer', 'artist']).toJS(),
  songsOfArtist: state.getIn(['singer', 'songsOfArtist']).toJS(),
  loading: state.getIn(['singer', 'loading'])
})

const mapDispatchtoProps = dispatch => ({
  getSingerDispatch(id) {
    dispatch(changeEnterLoading(true))
    dispatch(getSinger(id))
  }
})

function Singer(props) {
  const { artist, songsOfArtist, loading } = props
  const { getSingerDispatch } = props
  const [showStatus, setShowStatus] = useState(true)

  const collectButton = useRef()
  const imageWrapper = useRef()
  const songScrollWrapper = useRef()
  const songScroll = useRef()
  const header = useRef()
  const layer = useRef()
  const initialHeight = useRef(0)
  const musicNoteRef = useRef()

  const OFFSET = 5

  const musicAnimation = (x, y) => {
    musicNoteRef.current.startAnimation({ x, y })
  }

  useEffect(() => {
    const h = imageWrapper.current ? imageWrapper.current.offsetHeight : 0

    songScrollWrapper.current.style.top = `${h - OFFSET}px`
    initialHeight.current = h
    layer.current.style.top = `${h - OFFSET}px`
    songScroll.current.refresh()
  }, [])

  useEffect(() => {
    getSingerDispatch(props.match.params.id)
  }, [getSingerDispatch])

  // 用useCallback包裹，防止不必要的重复渲染
  const setShowStatusFalse = useCallback(() => {
    setShowStatus(false)
  }, [])

  const handleScroll = pos => {
    const height = initialHeight.current
    const newY = pos.y
    const imageDOM = imageWrapper.current
    const buttonDOM = collectButton.current
    const headerDOM = header.current
    const layerDOM = layer.current
    const minScrollY = -(height - OFFSET) + HEADER_HEIGHT
    const percent = Math.abs(newY / height)

    if (newY > 0) {
      imageDOM.style['transform'] = `scale(${1 + percent})`
      buttonDOM.style['transform'] = `translate3d(0, ${newY}px, 0)`
      layerDOM.style.top = `${height - OFFSET + newY}px`
    } else if (newY < minScrollY) {
      layerDOM.style.top = `${HEADER_HEIGHT - OFFSET}px`
      layerDOM.style.zIndex = 1
      headerDOM.style.zIndex = 100
      imageDOM.style.height = `${HEADER_HEIGHT}px`
      imageDOM.style.paddingTop = 0
      imageDOM.style.zIndex = 99
    } else if (newY >= minScrollY) {
      layerDOM.style.top = `${height - OFFSET + newY}px`
      layerDOM.style.zIndex = 1
      imageDOM.style.paddingTop = '75%'
      imageDOM.style.height = 0
      imageDOM.style.zIndex = -1
      buttonDOM.style['transform'] = `translate3d(0, ${newY}px, 0)`
      buttonDOM.style['opacity'] = `${1 - percent * 2}`
    }
  }

  return (
    <CSSTransition
      in={showStatus}
      timeout={300}
      appear={true}
      unmountOnExit
      onExited={props.history.goBack}
    >
      <Container>
        <Header
          title={artist.name}
          ref={header}
          handleClick={setShowStatusFalse}
        ></Header>

        <ImgWrapper ref={imageWrapper} bgUrl={artist.picUrl}>
          <div className="filter"></div>
        </ImgWrapper>
        <CollectButton ref={collectButton}>
          <i className="iconfont">&#xe613;</i>
          <span className="text">收藏</span>
        </CollectButton>
        <BgLayer ref={layer}></BgLayer>
        <SongListWrapper ref={songScrollWrapper}>
          <Scroll ref={songScroll} onScroll={handleScroll}>
            <SongsList
              songs={songsOfArtist}
              showCollect={false}
              // collectCount={10000}
              musicAnimation={musicAnimation}
            ></SongsList>
          </Scroll>
        </SongListWrapper>
        {loading ? <Loading></Loading> : null}
        <MusicNote ref={musicNote}></MusicNote>
      </Container>
    </CSSTransition>
  )
}

export default connect(mapStatetoProps, mapDispatchtoProps)(memo(Singer))
